<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			body{overflow:hidden;}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
</html>
<script type="text/javascript" src="../js/sprite.js" ></script>
<script type="text/javascript">
	var Game = function(){
		this.sprites = [];
	}
	Game.prototype = {
		draw : function (now){
			//然后在执行动画中更新sprites和绘制sprites
			this.updataSprites(now);
			this.drawSprites();
		},
		//更新sprites中的每一个成员
		updataSprites : function(now){
			var sprite;
			for(var i=0;i<this.sprite.length;i++){
				sprite = this.sprites[i];
				if(sprite.visible && this.isSpriteInView(sprite)){	//根据是否是隐藏的
					sprite.undate(now,
								this.fps,
								this.context,
								this.lastFrameTime);
				}
			}
		},
		//判断指定sprite是否隐藏
		isSpriteInView : function(sprite){
			return sprite.left + sprite.width > sprite.hOffset && sprite.left < sprite.hOffset + this.oCanvas.width;
		},
		//绘制sprite
		drawSprites : function(){
			var sprite;
			for(var i=0;i<this.sprite.length;i++){
				sprite = this.sprites[i];
				if(sprite.visible && this.isSpriteInView(sprite)){	//根据是否是隐藏的
					this.context.translate(-sprite.hOffset , 0);
					sprite.draw(this.context);
					this.context.translate(sprite.hOffset , 0);
				}
			}
		}
	}
</script>